<template>
    <div>
        <div class="first_part" style="height: 200px">
            <div>
                客户最多: <span>{{ mostCustomerName }}</span>
                <br>
                数量: <span>{{ mostCustomerNum }}</span>
            </div>
            <div>
                今日回访最多: <span>{{ callMostCustomerName }}</span>
                <br>
                数量: <span>{{ callMostCustomerNum }}</span>
            </div>
            <div>
                今日有效回访最多: <span>{{ isOkCallMostCustomerName }}</span>
                <br>
                数量: <span>{{ isOkCallMostCustomerNum }}</span>
            </div>
        </div>
        <div>
            <!-- 当天回访图 -->
            <div id="second_part"></div>
            <!-- 当月回访图 -->
            <div id="third_part"></div>
        </div>

    </div>
</template>

<script>
    import echarts from 'echarts';
    import { dateFormatArr } from '@/utils/time.js';


    export default {
        name: "Index",
        data() {
            return {
                mostCustomerName: "暂无数据",
                mostCustomerNum: 0,
                callMostCustomerName: "暂无数据",
                callMostCustomerNum: 0,
                isOkCallMostCustomerName: "暂无数据",
                isOkCallMostCustomerNum: 0,

                todayNames: [],    // 今天 echarts 的姓名
                todayVisits: [],   // 今天 echarts 回访数
                todayIsOkVisits: [],  // 今天 echarts 有效回访

                last30DateTime: [],   // 近 30 天的 datetime
                last30Info: [],   // 近 30 天的消息组
                last30Name: [],   // 近 30 销售名数组
            }
        },
        methods: {
            handleInitIndexData() {
                let roleId = this.COOKIE.get("role_id");
                let uid= this.COOKIE.get("uid");
                this.AXIOS.get(`/api/index/${uid}/${roleId}`)
                    .then(resp => {
                        let respObj = resp.data.data;
                        // console.log(respObj)
                        this.mostCustomerName = respObj.mostCustomerNum === 0 ? "暂无数据" : respObj.mostCustomerName;
                        this.mostCustomerNum = respObj.mostCustomerNum;
                        this.callMostCustomerName = respObj.callMostCustomerNum === 0 ? "暂无数据" : respObj.callMostCustomerName;
                        this.callMostCustomerNum = respObj.callMostCustomerNum;
                        this.isOkCallMostCustomerName = respObj.isOkCallMostCustomerNum === 0 ? "暂无数据" : respObj.isOkCallMostCustomerName;
                        this.isOkCallMostCustomerNum = respObj.isOkCallMostCustomerNum;
                        // 当天
                        for (let obj of respObj.todayData) {
                            // console.log(obj)
                            this.todayNames.push(obj.name);
                            this.todayVisits.push(obj.isok_visits_day);
                            this.todayIsOkVisits.push(obj.visits_day)
                        }

                        // 最近 30 天
                        let last30AllNameArr = [];  // 存放最近 30 天所有人的名字
                        let last30TimeArr = [];
                        for (let obj of respObj.last30Data) {
                            last30AllNameArr.push(obj.name);
                            last30TimeArr.push(obj.created_at);
                        }
                        // 需要去重
                        this.last30Name = Array.from(new Set(last30AllNameArr));
                        last30TimeArr = Array.from(new Set(last30TimeArr));
                        this.last30DateTime = dateFormatArr(last30TimeArr);
                        // console.log(last30AllNameArr)
                        // 通过名字去数据里取对应的值
                        let last30Info = [];
                        for (let name of this.last30Name) {
                            // console.log(name)
                            let dataMap = {name: name, type: 'line'};
                            let dataArr = [];
                            for (let obj of respObj.last30Data) {
                                if (obj['name'] === name) {
                                    dataArr.push(obj.isok_visits_day);

                                }
                            }
                            dataMap['data'] = dataArr;
                            last30Info.push(dataMap);
                        }
                        this.last30Info = last30Info;
                        // console.log('last30name:', this.last30Name)
                        // console.log('last30date:', this.last30DateTime)
                        // console.log('last30Info:', this.last30Info)

                        // 初始化 echarts
                        this.handleInitToday();
                        this.handleInitMonth();
                    })
                    .catch(err => {
                        this.$message({"type": "error", "message": err})
                    })
            },
            handleInitToday() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('second_part'));
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        text: '今日回访情况'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['今日回访', '今日有效回访']

                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.todayNames,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '人数',
                            min: 0,
                            max: 100,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value} 个'
                            }
                        },
                    ],
                    series: [
                        {
                            name: '今日回访',
                            type: 'bar',
                            data: this.todayVisits,
                        },
                        {
                            name: '今日有效回访',
                            type: 'bar',
                            data: this.todayIsOkVisits,
                        },
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            handleInitMonth() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('third_part'));
                let option = {
                    title: {
                        text: '近30天有效回访走势图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: this.last30Name
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.last30DateTime
                    },
                    yAxis: {
                        name: '人数',
                        type: 'value',
                        min: 0,
                        max: 100,
                        interval: 20,
                        axisLabel: {
                            formatter: '{value} 个'
                        }
                    },
                    series: this.last30Info
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        },
        mounted() {
            this.handleInitIndexData();
        },
    }
</script>

<style scoped>
    .first_part div {
        float: left;
        border: 5px #19b7cf solid;
        border-radius: 20px;
        height: 100px;
        width: 240px;
        line-height: 40px;
        margin-left: 150px;
        margin-top: 40px;
        font-size: 15px;
        font-weight: bold
    }

    .first_part div span {
        font-weight: normal
    }

    #second_part {
        width: 40%;
        height: 400px;
        text-align: center;
        float: left;
    }

    #third_part {
        width: 60%;
        height: 400px;
        text-align: center;
        float: left;
    }
</style>
